<template>
  <base-breadcrumb :title="titleName">
    <searchData :search-data="searchArr" @search="search" />
    <a-card :bordered="false">
      <!-- <title-name title="列表" /> -->
      <div class="table-operator">
        <a-button v-btnPermission="'sy_011_add_01'" type="primary" icon="plus" @click="handleAdd"> 新增 </a-button>
      </div>
      <list-table
        ref="table"
        size="default"
        :row-key="(record) => record.customerId"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumpers
        :scoped-slots="$scopedSlots"
        show-pagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="levelTypeDto" slot-scope="text, record">{{ record.levelTypeDto.name }}</span>
        <span slot="action" slot-scope="text, record" v-show="record.selectStatus !== 0">
          <template>
            <a v-btnPermission="'sy_011_edi_02'" @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a v-btnPermission="'sy_011_del_03'" @click="handleDel(record)">删除</a>
          </template>
        </span>
      </list-table>
      <add-customer ref="createModal" :visible="visible" :loading="confirmLoading" :model="mdl" @cancel="handleCancel" @ok="handleOk" />
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getTypeLabel } from '@/api/commons'
import { findListByMain, createByMain, editByMain, deleteByMain, findListByMainId } from '@/api/gateway'
import addCustomer from './addCustomer'
const columns = [
  {
    title: '序号',
    width: 65,

    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '平台名称',
    width: 100,
    dataIndex: 'name'
  },
  {
    title: '平台层级',
    width: 100,
    dataIndex: '',
    scopedSlots: { customRender: 'levelTypeDto' }
  },
  {
    title: '平台链接',
    width: 100,
    dataIndex: 'url'
  },
  {
    title: '状态',
    width: 100,
    dataIndex: 'statusName'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 180,
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'default',
    text: '可用'
  },
  1: {
    status: 'processing',
    text: '不可用'
  }
}

export default {
  name: 'a' + Date.now(),
  components: {
    addCustomer,
    STable,
    Ellipsis
  },
  data() {
    this.columns = columns
    return {
      searchArr: [
        // 搜索框
        {
          name: '平台名称',
          value: 'name',
          type: 'input'
        },
        {
          name: '平台层级',
          value: 'levelTypeId',
          type: 'select',
          data: []
        }
      ],
      titleName: '',
      visible: false,
      confirmLoading: false,
      mdl: null,
      isEdit: false,
      // 查询参数
      queryParam: {},
      editData: {},
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, this.queryParam)
        return findListByMain({ query: requestParameters, ...parameter }).then((res) => {
          console.log('resresres', res)
          res.data = res.data.map((item) => {
            switch (item.name) {
              case '工程大数据系统':
                item.selectStatus = 0
                break
              case '实时连线与超高清全景监控系统':
                item.selectStatus = 0
                break
              case '人力资源系统':
                item.selectStatus = 0
                break
              default:
                break
            }
            return item
          })
          return res
        })
      }
    }
  },
  created() {
    this.getCustomersLevel()
  },
  methods: {
    handleDel(record) {
      let that = this
      that.$confirm({
        title: '删除',
        content: '确定删除此数据吗？',
        onOk() {
          deleteByMain({ id: record.id }).then((res) => {
            if (res.data == 200 || res.data.code == 200) {
              that.$message.success('删除成功！')
              that.$refs.table.refresh(true)
            }
          })
        },
        onCancel() {}
      })
    },
    //列表搜索
    search(values) {
      this.queryParam = values
      this.$refs.table.refresh(true)
    },
    //查询平台
    getCustomersLevel() {
      getTypeLabel({ type: 7 }).then((res) => {
        if (res.code === 200) {
          if (res?.data?.length > 0) {
            this.searchArr[1].data = res.data.map((item) => {
              item.label = item.name
              item.value = item.id
              return item
            })
          }
        }
      })
    },
    resetSearch() {
      this.queryParam = {}
    },
    //打开新增窗口
    handleAdd() {
      this.mdl = {}
      this.$refs.createModal.uploadArrys = []
      this.visible = true
      this.isEdit = false
    },
    //打开编辑窗口
    async handleEdit(record) {
      this.visible = true
      let res = await findListByMainId(record.id)
      if (res.code === 200) {
        this.mdl = res?.data
        this.mdl.levelTypeDto = this.mdl.levelTypeDto?.id
        this.$refs.createModal.uploadArrys = this.mdl.fileInfoVO ? [this.mdl.fileInfoVO] : []
      }
      this.isEdit = true
    },
    //确定
    handleOk() {
      let that = this
      const form = that.$refs.createModal.form
      form.validateFields((errors, values) => {
        let agreement = values.url.substring(0, 7)
        let agreement2 = values.url.substring(0, 8)
        if (agreement !== 'http://' && agreement2 !== 'https://') {
          that.$message.error('外部链接必须包含http://或https://')
          return
        }
        this.searchArr[1].data.forEach((item) => {
          if (item.id === values.levelTypeDto) {
            values.levelTypeDto = item
          }
        })
        delete values.levelTypeDtoId
        values.fileInfoVO = that.$refs.createModal.uploadArrys[0]
        if (!errors) {
          if (that.isEdit) {
            // 修改
            that.mdl.name = values.name
            that.mdl.levelTypeDto = values.levelTypeDto
            that.mdl.url = values.url
            that.mdl.status = values.status
            that.mdl.sortNum = values.sortNum
            that.mdl.fileInfoVO = values.fileInfoVO
            that.confirmLoading = true
            editByMain(that.mdl)
              .then((res) => {
                that.confirmLoading = false
                if (res.code === 200) {
                  that.visible = false
                  // 重置表单数据
                  form.resetFields()
                  // 刷新表格
                  that.$refs.table.refresh(true)
                  that.$message.success('修改成功')
                } else {
                  that.$message.error('修改失败')
                }
              })
              .catch(() => {
                that.confirmLoading = false
              })
          } else {
            // 新增
            that.confirmLoading = true
            createByMain(values)
              .then((res) => {
                that.confirmLoading = false
                if (res.code === 200) {
                  that.visible = false
                  // 重置表单数据
                  form.resetFields()
                  // 刷新表格

                  that.$refs.table.refresh(true)
                  that.$message.success('新增成功')
                } else {
                  that.$message.success('新增失败')
                }
              })
              .catch(() => {
                that.confirmLoading = false
              })
          }
        }
      })
    },
    //取消
    handleCancel() {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    }
  }
}
</script>



